<style>
    body.bodylogin {
        /*background: url(../assets/images/bg.jpg) no-repeat 0 0;*/
        background-color: #f5f7f9;
        background-size: cover;
    }

    .login-right {
        color: azure;
        width: 540px;
        height: 350px;
        opacity: 0.9;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        background-color: rgb(207, 211, 216);
    }
</style>

<template>
    <div class="login-right" style="padding:20px;padding-top:70px;text-align: center">
        <Row :gutter="16">
            <Col span="12">
            <!-- <Icon type="ios-chatbubbles" :size="100" color="#5F9EA0" /> -->
            <img src="../assets/images/logo2.png" width="170px"/>
            <div>Powered by Souyuan V1.1 © 2018 桂ICP备15008121号-4</div>
            </Col>
            <Col span="12">
            <Form :model="formItem" :label-width="50" class="">
                <FormItem label="用户名">
                    <Input v-model="formItem.username" type="text" placeholder="请输入用户名"></Input>
                </FormItem>
                <FormItem label="密码">

                    <Input v-model="formItem.password" type="password" placeholder="请输入密码..."></Input>
                </FormItem>

                <FormItem>
                    <Button type="primary" v-on:click="is_post" style="margin-top: 40px">立即登录</Button>
                </FormItem>
            </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
    // import $ from 'jquery'
    import axios from 'axios'

    export default {
        name: 'Login',
        data() {
            return {
                url: 'http://111.230.56.24/api/users/login',
                formItem: {
                    username: '', //用户名
                    password: '', // 密码
                    switch: true,
                },
            }
        },
        methods: {
            // 成功提示
            success(msg) {
                this.$Message.success({
                    content: msg,
                    duration: 2
                });
            },
            // 错误提示
            error(msg) {
                this.$Message.error({
                    content: msg,
                    duration: 2
                });
            },
            setCookie(c_name, value, expiredays) {
                var exdate = new Date();
                exdate.setDate(exdate.getDate() + expiredays);
                document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
            },
            getCookie(name) {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg)) {
                    return (arr[2]);
                }
                else {
                    return null;
                }
            },
            // post
            is_post() {
                var self = this;
                var response = "";
                if (self.formItem.username.replace(/(^s*)|(s*$)/g, "").length == 0) {
                    self.error("用户名不能为空");
                    return;
                }
                if (self.formItem.password.replace(/(^s*)|(s*$)/g, "").length == 0) {
                    self.error("密码不能为空");
                    return;
                }
                var data = {
                    user_name: this.formItem.username,
                    user_pwd: this.formItem.password,
                }
                axios({
                    method: "POST",
                    url: self.url,
                    data: data,
                    headers: {
                        'time': (new Date()).valueOf(),
                    },
                })
                    .then(function (response) {
                        if (response.data.code == 200) {
                            self.setCookie('token', response.headers.authorization);
                            self.setCookie('user_id',response.data.data['user_id']);
                            self.setCookie('user_name',response.data.data['user_name']);
                            self.$router.push("/"); //登录成功，跳转到首页
                            self.success(response.data.msg);
                        } else {
                            console.log(response.data);
                            self.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        self.$Message.error(error);
                    });
            }
        },
        created() {
            document.body.setAttribute("class", "bodylogin");
        }
    }
</script>
